<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <#include "/inc/header.ftl">
</head>
<body class="mdui-theme-layout-dark mdui-bottom-nav-fixed">
    <!-- 头部信息 -->
    <div id="lay-header" class="mdui-toolbar mdui-color-white">
        <span class="mdui-typo-title">缓存管理平台</span>
        <div class="mdui-toolbar-spacer"></div>
        <div class="mdui-card-header">
            <img class="mdui-card-header-avatar" src="/images/header.gif"/>
            <div class="mdui-card-header-title">Taller</div>
            <div class="mdui-card-header-subtitle">127.0.0.1</div>
        </div>
    </div>
    <!-- 数据展示区域 -->
    <div class="mdui-container-fluid pm0">
        <!-- 左侧菜单区域 -->
        <div class="mdui-col-xs-3 mdui-col-md-2 br" id="lay-menu">
            <ul class="mdui-list" id="lay-menu-view">

            </ul>
        </div asid id=id= aside>
        <!-- 右侧数据展示区域 -->
        <div style="display: none;" class="mdui-col-xs-9 mdui-col-md-10 pm0" id="lay-context">
            <!-- 页面加载进度条 -->
            <div class="mdui-progress">
                <div style="display: none;" class="mdui-progress-indeterminate mdui-color-deep-orange" id="lay-context-progress" ></div>
            </div>
            <!-- 操作功能区域 -->
            <div class="mdui-container-fluid h5" id="lay-context-opt">
                <div class="mdui-col-xs-9 mdui-valign" id="lay-context-opt-btn">

                </div>
                <div class="mdui-col-xs-3">
                    <div class="mdui-textfield mdui-textfield-expandable mdui-float-right">
                        <button class="mdui-textfield-icon mdui-btn mdui-btn-icon">
                            <i class="mdui-icon material-icons">search</i></button>
                        <input class="mdui-textfield-input" type="text" placeholder="请输入关键字查询"/>
                        <button class="mdui-textfield-close mdui-btn mdui-btn-icon">
                            <i class="mdui-icon material-icons">close</i>
                        </button>
                    </div>
                </div>
            </div>
            <!-- 表格数据区域 -->
            <div class="mdui-container-fluid mdui-table-fluid" id="lay-context-table">
            </div>
            <!-- 分页组件 -->
            <div class="mdui-container-fluid h4" id="lay-context-page">
                <div class="mdui-col-xs-10 mdui-col-md-11">
                    <div class="mdui-container" style="width: 100%">
                        <label class="mdui-slider mdui-slider-discrete mdui-text-deep-orange" id="lay-context-page-box">
                            <input id="lay-context-page-size" type="range" step="1" min="1" max="10" value="1"/>
                        </label>
                    </div>
                </div>
                <div class="mdui-col-xs-2 mdui-col-md-1 mdui-valign h3">
                    <span>
                        <span id="lay-context-page-current">1</span> /
                        <span id="lay-context-page-total">1</span>
                    </span>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部信息 -->
    <div id="lay-footer" class="mdui-bottom-nav mdui-color-white">
        <h4 class="mdui-valign" id="lay-footer-copyright"></h4>
    </div>
    <#include "/inc/footer.ftl">

    <script src="/control/index.js"></script>
    <script>
        $(function () {
            $('#lay-footer-copyright').html(copyright);
            autoHeiht();
            $(window).resize(function(){
                autoHeiht();
            });
            initMenu();
        });
        //初始化菜单
        function initMenu() {
            var request = ajax.get({url:'/admin/menu/test/menu'});
            request.done(function (data) {
                var menu = component.menu(data.result);
                $('#lay-menu-view').html(menu);
                $('#lay-menu-view li').click(function () {
                    $('#lay-context').show();
                    $('#lay-context-progress').show();
                    //清掉所有的样式
                    $('#lay-menu-view li').find('.mdui-list-item-avatar').removeClass('mdui-color-deep-orange-500');
                    $(this).each(function () {
                        $(this).find('.mdui-list-item-avatar').addClass('mdui-color-deep-orange-500');
                    });
                    var html = getView($(this).attr('data-url'));
                    $('#lay-context-table').html(html);
                    $('#lay-context-progress').hide();
                    drawing();
                })
            });
        }
        //加载页面
        function getView(_url){
            var html = '';
            $.ajax({
                type: 'get',
                url: _url,
                async : false,
                success:function (data) {
                    html = data;
                },
                error: function (e) {
                    //tips('找不到对应的view');
                }
            })
            return html;
        }

        //分页组件初始化
        function initPage(_config) {
            //设置总页数
            var total = (typeof _config.total) == 'undefined' ? 1 : _config.total;
            $('#lay-context-page-size').attr('max',total);
            $('#lay-context-page-total').html(total);
            $('#lay-context-page').mouseup(function () {
                //获取当前页
                var index = $(this).find('#lay-context-page-size').val();
                if(current_page != index){
                    current_page = index;
                    //执行分页查询函数
                    setTimeout(_config.fn,20);
                }
            })
            drawing();
        }
        //设置当前分页
        function setCurrent() {
            $('#lay-context-page-current').html(current_page);
        }
        //设置操作按钮
        function initAuthBtn(_config) {
            $('#lay-context-opt-btn').html(_config.btn);
            mdui.updateSliders();
        }
        //自适应
        function autoHeiht(){
            var o = getHeight();
            var h = o.wh - (o.pf+o.ph);
            //主容器
            $('#lay-menu').css('overflow-y','auto');
            $('#lay-context').css('overflow-y','auto');
            $('#lay-menu').height(h);
            $('#lay-context').height(h);
            //表格容器
            var th = h - 95;
            $('#lay-context-table').css('overflow-y','auto');
            $('#lay-context-table').height(th);

        }
        //读取可见区高度
        function getHeight(){
            return {
                wh : $(window).height(),            //浏览器可见高度
                ph : $('#lay-header').height(),
                pf : $('#lay-footer').height()
            };
        }
        //组件重新渲染
        function drawing() {
            mdui.updateTables();
            mdui.updateTextFields();
            mdui.updateSliders();
        }
    </script>
</body>
</html>